    <template>
        <el-form :inline="true" :model="formData" class="demo-form-inline">
            <div class="line">人员管理</div>
            <el-form-item label="序号" style="margin-left: 60px;">
                <el-input v-model="formData.id" placeholder="请输入" class="custom-input gray-bg" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="emits('search', { ...formData })">搜索</el-button>
            </el-form-item>
            <el-form-item style="margin-left: 15%;">
                <el-button type="warning" @click="emits('addPeople')">添加人员</el-button>
            </el-form-item>
        </el-form>
    </template>

<script lang='ts' setup>
import { reactive } from 'vue';
const emits = defineEmits(['search', 'addPeople'])
const formData = reactive({
    id: ''
})

</script>

<style lang='scss' scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.demo-form-inline {
    height: 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    width: 90%;
    .line {
        width: 100px;
        font-weight: 700;
        font-size: 20px;
        color: #fff;
        // line-height: 30px;
        margin-top: -15px;
    }
}


:deep(.custom-input .el-input__wrapper) {
    background-color: #2C4353 !important;
    border: none !important;
    // 去除聚焦时的阴影
    box-shadow: none !important;
}
</style>